<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="icon" href="/static/cart/img/心04.png" type="/image/x-icon"/>
    <link rel="stylesheet" href="/static/cart/css/One_bdyStyle.css">
    <link rel="stylesheet" href="/static/cart/css/index.css">
    <script src="/static/cart/js/jquery-3.1.1.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/cart/css/One_mainFoot.css">
    <link rel="stylesheet" href="/static/cart/css/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
<header>
    <a name="mao1">
        <div class="header">

            <ul class="header-left">
                <li>

                    <a href="http://gulimall.com">首页</a>
                </li>

            </ul>
            <ul class="header-right">
                <li>
                    <a th:if="${session.loginUser == null}" href="http://auth.gulimall.com/login.html" class="li_2">你好，请登录</a>
                    <a th:if="${session.loginUser != null}">欢迎, [[${session.loginUser.nickname}]]</a>
                </li>
                <li>
                    <a th:if="${session.loginUser == null}" href="http://auth.gulimall.com/reg.html"
                       style="color: red;">免费注册</a>
                </li>
                <li class="spacer"></li>
                <li><a href="http://order.gulimall.com/list.html">我的订单</a></li>
                <li class="spacer"></li>

            </ul>
            <div style="clear: both;"></div>
        </div>

    </a>
</header>


<div class="one_search">

    <div class="one_sousuo">
        <div class="one_search_top">
            <div class="one_top_left">
                <a href="http://gulimall.com" class="one_left_logo"><img src="/static/cart/img/logo1.jpg"></a>
                <a href="http://cart.gulimall.com/cart.html" class="one_left_link">购物车</a>
            </div>
            <div class="one_top_right">
                <input type="text" class="one_right_txt">
                <input type="button" value="搜索" class="one_right_btn">
            </div>
        </div>
        <div class="one_search_load" th:if="${session.loginUser == null}">
            <img src="/static/cart/img/shop_07.jpg" class="one_load_wraing">
            <span>您还没有登录！登录后购物车的商品将保存到您账号中</span>
            <a href="#"><input type="button" onclick="login()" value="立即登录" class="one_load_btn"></a>
        </div>
    </div>
</div>
<div class="One_BdyShop">
    <div class="OneBdy_box">
        <div class="One_tabTop">
            <div class="One_Topleft">
                <span>全部商品 </span>
            </div>
        </div>

        <div class="One_ShopTop">
            <ul>
                <li><input type="checkbox" class="allCheck"> 全选</li>
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
                <li>操作</li>
            </ul>
        </div>

        <div class="One_ShopCon">
            <h1 th:if="${cart.items == null}">购物车还没有商品，<a href="http://gulimall.com/">去购物</a>
            </h1>
            <ul th:if="${cart.items != null}">
                <li th:each="item:${cart.items}">
                    <div></div>
                    <div>
                        <ol>
                            <li>
                                <input type="checkbox" class="check" th:attr="skuId=${item.skuId}"
                                       th:checked="${item.check}">
                            </li>
                            <li>
                                <dt><img th:src="${item.image}" alt=""></dt>
                                <dd style="width: 300px;">
                                    <p>
                                        <a class="showItemInfo" th:attr="skuId=${item.skuId}" th:text="${item.title}">TCL
                                            55A950C
                                            55英寸32核</a>
                                        <br/>
                                        <span th:each="attrValue:${item.skuAttrValues}"
                                              th:text="${attrValue} + ' '">尺码: 55时 超薄曲面 人工智能</span>
                                    </p>
                                </dd>
                            </li>
                            <li>
                                <p class="dj" th:text="'￥' + ${#numbers.formatDecimal(item.price,3,2)}">￥4599.00</p>
                            </li>
                            <li>
                                <p th:attr="skuId=${item.skuId}">
                                    <input type="button" value="-" class="countOpsBtn cart-icon-dec">-</input>
                                    <input class="countOpsNum" th:value="${item.count}"/>
                                    <input type="button" value="+" class="countOpsBtn cart-icon-add">+</input>
                                </p>
                            </li>
                            <li style="font-weight:bold">
                                <p class="zj">￥[[${#numbers.formatDecimal(item.totalPrice,3,2)}]]</p></li>
                            <li>
                                <p class="deleteItemBtn" th:attr="skuId=${item.skuId}">删除</p>
                            </li>
                        </ol>
                    </div>
                </li>

            </ul>
        </div>

        <div class="One_ShopFootBuy">
            <div>
                <ul>
                    <li><input type="checkbox" class="allCheck"><span>全选</span></li>
                    <li class="deleteItems">删除选中的商品</li>
                    <li class="moveToGZ">移到我的关注</li>
                    <li class="quickClear">清除购物车</li>
                </ul>
            </div>
            <div>
                <font style="color:#e64346;font-weight:bold;" class="sumNum"> </font>&nbsp;
                <ul>
                    <li><img src="/static/cart/img/buyNumleft.png" alt=""></li>
                    <li><img src="/static/cart/img/buyNumright.png" alt=""></li>
                </ul>
            </div>
            <div>
                <ol>
                    <li>总价:<span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt">￥[[${#numbers.formatDecimal(cart.totalAmount, 3, 2)}]]</span>
                    <li>优惠：￥[[${#numbers.formatDecimal(cart.reduce,1,2)}]]</li>
                </ol>
            </div>
            <div>
                <button onclick="toTrade()" type="button">去结算</button>
            </div>
        </div>
    </div>
</div>

<!--弹窗-->
<div class="One_isDel">
    <p>
        <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span>
    </p>
    <div>
        <dl>
            <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt>
            <dd>
                <li>删除商品？</li>
                <li>您可以选择移到关注，或删除商品。</li>
            </dd>
        </dl>
    </div>
    <div>
        <button type="button" onclick="deleteItems()">确定删除</button>
        <button type="button">移到关注</button>
    </div>
</div>
<div class="One_moveGzIfNull">
    <p>
        <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span>
    </p>
    <dl>
        <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt>
        <dd>请至少选中一件商品！</dd>
    </dl>
</div>
<div class="One_moveMyGz">
    <p>
        <span>删除</span><span><img src="/static/cart/img/错误.png" alt=""></span>
    </p>
    <div>
        <dl>
            <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt>
            <dd>
                <li>移到关注</li>
                <li>移动后选中商品将不再购物车中显示</li>
            </dd>
        </dl>
    </div>
    <div>
        <button type="button">确定</button>
        <button type="button">取消</button>
    </div>
</div>
<div class="One_clearShop">
    <p>
        <span>提示</span><span><img src="/static/cart/img/错误.png" alt=""></span>
    </p>
    <dl>
        <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt>
        <dd>没有下柜商品!</dd>
    </dl>
</div>
<div class="One_cartWarn">
    <p>
        <span>提示</span><span><img src="/static/cart/img/错误.png" alt=""></span>
    </p>
    <div>
        <dl>
            <dt><img src="/static/cart/img/感叹三角形 (2).png" alt=""></dt>
            <dd>
                <li>请正确输入</li>
                <li>商品数量取值 1~200。</li>
            </dd>
        </dl>
    </div>
    <div>
        <button type="button">确定</button>
    </div>
</div>

<!--底部-->
<div class="one_footer">
</div>

</body>
<script src="/static/cart/js/index.js" charset="utf-8"></script>
<script type="text/javascript">

    //去结算
    function toTrade() {
        location.href = "http://order.gulimall.com/toTrade";
    }

    function login() {
        location.href = "http://auth.gulimall.com/login.html";
    }

    $(".showItemInfo").click(function () {
        let skuId = $(this).attr("skuId");
        location.href = "http://item.gulimall.com/" + skuId + ".html";
        return false;
    })


    function checkChange(skuId, checked) {
        //发送ajax请求 V
        $.post("/checkItem?skuId=" + skuId + "&checked=" + (checked ? 1 : 0));
        if ($(".check:checked").length == $(".check").length) {
            $(".allCheck").prop("checked", true);
        } else {
            $(".allCheck").prop("checked", false)
        }
        //重定向请求 X
        //location.href = "http://cart.gulimall.com/checkItem?skuId=" + skuId + "&checked=" + (checked ? 1 : 0);
    }


    function deleteItem(deleteId) {
        $.post("/deleteItem?skuId=" + deleteId, function () {
            location.reload();
        });
        //location.href = "http://cart.gulimall.com/deleteItem?skuId=" + deleteId
    }

    $(".one_right_btn").click(function () {
        location.href = "http://search.gulimall.com/list.html?keyword=" + $(this).prev().val();

    })

    //删除购物车选项传入skuId || 全选删除产生默认是skuId为默认值true
    function deleteItems() {
        let skuId = $(".One_isDel").attr("skuId");
        $(".One_isDel").removeAttr("skuId");
        if (skuId != undefined) {
            deleteItem(skuId);
        } else {
            var skuIds = new Array();
            $(".One_ShopCon").find("ol").each(function () {
                let check = $(this).find("li").eq(0).children().prop("checked");
                if (check) {
                    let skuId = $(this).find("li").eq(0).children().attr("skuId");
                    $(this).parent().parent().remove();
                    skuIds.push(skuId);
                }
            });
            if (skuIds.length >= 1) {
                $.post("/deleteItem?skuId=" + skuIds);
                sumSumPrice();
            }
        }
    }

    //商品数量变化操作
    function countChange(object) {
        let count = $(object.get(0)).parent().find(".countOpsNum").val();
        let skuId = $(object.get(0)).parent().attr("skuId");
        if ($(object.get(0)).is(".cart-icon-add")) {
            ++count;
        } else if ($(object.get(0)).is(".cart-icon-dec")){
            --count;
        }
        //校验count：必须是[1, 200]中的数
        let pattern = /^([1-9]|[1-9]\d|1\d{2}|200)$/;
        if (!pattern.test(count)) {
            count = 1; //如果不校验不通过就手动将count变成1 todo 变成输入之前的商品数量
            $(".One_cartWarn").show();
        }
        //修改页面的值
        $(object.get(0)).parent().find(".countOpsNum").val(count);
        let dj = $(object.get(0)).parents("ol").find("li:eq(2)").children().html().substring(1);
        let itemPrice = count * dj
        $(object.get(0)).parents("ol").find("li:eq(4)").find(".zj").html("￥" + itemPrice + ".00")
        //发送一部请求
        $.post("/countItem?skuId=" + skuId + "&num=" + count);
        //重新计算购物车清单
        sumSumPrice();
    }

    //去结算
    $(".One_ShopFootBuy>div:last-child button").mouseover(function () {
        $(this).css("cursor", "pointer");
    })

    $(".One_ShopFootBuy>div:last-child button").click(function () {
        $(".Ozzne_b").show();
        $(".One_DengLu").show();
    })

    //buyNum
    $(".One_ShopFootBuy>div:nth-child(2)").mouseover(function () {
        $(this).css("cursor", "pointer")
    })

    $(".One_ShopFootBuy>div:nth-child(2)").click(function () {
        $(this).children("ol").toggle();
        $(this).children("ul").toggle();
        var dis = $(".One_ShopFootBuy>div:nth-child(2) ol").css("display");
        if (dis == "none") {
            $(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(0)")
        } else if (dis == "block") {
            $(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(180deg)")
        }
    })

    $(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").click(function () {
        if ($(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").is(":checked")) {
            $(".check").prop("checked", true);
            $(".check").parent().parent().parent().css("background", "#fff4e8");
        } else {
            $(".check").parent().parent().parent().css("background", "none");
            $(".check").prop("checked", false);
        }
    })

    //如果子选择框没有选中则父选框取消全选
    $(".check").click(function () {
        $(".check").each(function () {
            if ($(this).prop("checked") == true) {
                $(".allCheck").prop("checked", false);
            }
        })
    })


    $(".check").click(function () {
        sumSumPrice();
    })

    //子选择框全部选中复选框也选中
    $(".check").click(function () {
        if ($(".check:checked").length == $(".check").length) {
            $(".allCheck").prop("checked", true);
        } else {
            $(".allCheck").prop("checked", false)
        }
    })

    //复选框控制子选择框全选或者全部选
    $(".allCheck").click(function () {
        let checked = $(this).prop("checked");
        let bgc = checked ? "rgb(255, 244, 232)" : "none"
        $(".check").parent().parent().parent().css("background", bgc);
        $(".allCheck").prop("checked", checked);
        $(".check").each(function () {
            if ($(this).prop("checked") != checked) {
                const skuId = $(this).attr("skuId");
                $(this).prop("checked", checked)
                checkChange(skuId, checked);
            }
        })
        sumSumPrice();
    })


    //选中当前商品背景变色 todo
    $(".check").each(function (index) {
        $(".check").eq(index).click(function () {
            if ($(this).is(":checked")) {
                $(this).parent().parent().parent().parent().children("div:last-child").css("background", "#fff4e8")
                $(this).parent().parent().parent().css("background", "#fff4e8");
            } else {
                $(this).parent().parent().parent().parent().children("div:last-child").css("background", "none")
                $(this).parent().parent().parent().css("background", "none")
            }
        })
    })

    //删除已选的商品
    $(".One_ShopFootBuy>div:first-child ul li:nth-child(2)").click(function () {
        if ($(".check").is(":checked") == false) {

            $(".One_moveGzIfNull").show();
        } else {

            $(".One_isDel").show(); //删除弹框显示
            $(".One_moveGzIfNull").hide();
        }
    })

    //鼠标移到删除、关注、清空、商品title上是变成红色
    $(".One_ShopFootBuy>div:first-child ul li:not(:first-child), .showItemInfo").mouseover(function () {
        $(this).css({
            "cursor": "pointer",
            "color": "#e64346"
        })
    }).mouseout(function () {
        $(this).css("color", "black")
    })

    //移到我的关注
    $(".moveToGZ").click(function () {
        $(".check").each(function (index) {
            if ($(this).is(":checked") == false) {
                $(".One_moveGzIfNull").show();
            } else {
                $(".One_moveMyGz").show();
            }
        })
    })


    //点击×号关闭
    $(".One_moveGzIfNull>p span:last-child img, .One_moveMyGz>p span:last-child img, .One_cartWarn>p span:last-child img").click(function () {
        $(".One_moveGzIfNull").hide();
        $(".One_cartWarn").hide();
        $(".One_moveMyGz").hide();
    })


    //移到我的关注确定按钮点击登录弹框弹出
    $(".One_moveMyGz>div:last-child button:first-child").click(function () {
        $(".One_moveMyGz").hide();
        //todo 登录
    })

    //移到我的关注取消按钮点击关闭
    $(".One_moveMyGz>div:last-child button:last-child").click(function () {
        $(".One_moveMyGz").hide();
    })
    $(".One_cartWarn>div:last-child button").click(function () {
        $(".One_cartWarn").hide();
    })

    //快速清除
    $(".quickClear").click(function () {
        //todo 快速清除
        $(".One_clearShop").show()
    })
    $(".One_clearShop>p span:last-child img").click(function () {
        $(".One_clearShop").hide();
    })

    //购物车+ -
    //鼠标移入变小手
    $(".countOpsBtn").mouseover(function () {
        $(this).css("cursor", "pointer")
    })
    //购物车商品数量操作
    $(".cart-icon-add, .cart-icon-dec").click(function () {
        countChange($(this));
        $(this).parents("ol").children("li").eq(0).children().prop("checked", true);
        $(this).parents("div").first().css("background", "rgb(255, 244, 232)");
        let flag = $(".check:checked").length == $(".check").length ? true : false;
        $(".allCheck").prop("checked", flag);
    })
    $(".countOpsNum").change(function () {
        countChange($(this));
    })

    //商品删除鼠标移入变色
    $(".deleteItemBtn").mouseover(function () {
        $(this).css({
            "cursor": "pointer",
            "color": "#e64346"
        });
    }).mouseout(function () {
        $(this).css({
            "cursor": "pointer",
            "color": "gray"
        });
    })
    //给deleteItems设置skuId属性，并弹出二次确认框
    $(".deleteItemBtn").click(function () {
        $(".One_isDel").attr("skuId", $(this).attr("skuId"));
        $(".One_isDel").show();
    })

    //确定删除弹框移入我的关注
    $(".One_isDel>div:last-child button:last-child").click(function () {
        $(".One_isDel").hide();
        // todo 我的关注
        $(".One_moveMyGz").show();
    })
    //删除弹框
    $(".One_isDel>div:last-child button:first-child").click(function () {
        $(".One_isDel").hide();
    })

    $(".One_isDel>div:last-child button").mouseover(function () {
        $(this).css("cursor", "pointer");
    })

    //点击插 删除出现弹框
    $(".One_isDel>p img").click(function () {
        $(".One_isDel").hide();
    })


    //封装总价钱函数
    function sumSumPrice() {
        var zzj = 0;
        if ($(".check").length <= 0) {
            $(".fnt").html("￥000.00")
        }
        $(".check").each(function () {
            if ($(this).prop("checked")) {
                var zj = $(this).parents("ol").find(".zj").html().substring(1);
                zzj = zzj + parseFloat(zj);
            }
            $(".fnt").html("￥" + zzj + ".00")
        })
    }

    //封装总数量函数
    function sumSumNum() {
        var kong = 0;
        $(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:nth-child(2)").each(function () {
            kong += parseFloat($(this).html())
        })
        $(".sumNum").html(kong);
    }

    $(".One_ShopCon ul li>div:nth-child(2)>ol>li:nth-child(2)>dd").mouseover(function () {
        $(this).css({
            "cursor": "pointer",
            "color": "#e64346"
        })
    }).mouseout(function () {
        $(this).css("color", "black")
    })

    //商品勾选
    $(".check").click(function () {
        let skuId = $(this).attr("skuId");
        let checked = $(this).prop("checked")
        checkChange(skuId, checked);
    });

    //购物车顶端tab
    $(".One_Topleft span:last-child").mouseover(function () {
        $(".One_Topleft span:first-child").css({
            "color": "black",
            "border-bottom": "none"
        })
        $(this).css({
            "cursor": "pointer",
            "color": "#E4393C",
            "border-bottom": "2px solid red"
        })
    }).mouseout(function () {
        $(this).css({
            "color": "black",
            "border-bottom": "none"
        });
        $(".One_Topleft span:first-child").css({
            "cursor": "pointer",
            "color": "#E4393C",
            "border-bottom": "2px solid red"
        })
    })

    function check() {
        let flag = $(".check:checked").length == $(".check").length ? true : false;
        $(".allCheck").prop("checked", flag);
        $(".check").each(function () {
            let checked = $(this).prop("checked");
            let bgc = checked ? "rgb(255, 244, 232)" : "none"
            $(this).parents("div").first().css("background", bgc);
        });
    }

    $(document).ready(function () {
        check();
    });
</script>
</html>
